<template>
  <div class="password-box">
    <p v-if="isChangeMobile" style="color:#999">您当前手机号为{{ mobile }}</p>
    <!-- <div class="title-div" v-if="!isChangeMobile">{{isChangeMobile ? "请输入原手机号码" : "手机号"}}</div>
    <div v-if="!isChangeMobile">
      <input type="text" v-model="mobile" :placeholder="isChangeMobile?'请输入旧手机号':'请输入手机号'" />
    </div> -->
    <div class="title-div">
      {{
        isChangeMobile
          ? isSet1
            ? "请输入原手机号上的验证码"
            : "请输入新手机号码作为登录帐号"
          : "手机号"
      }}
    </div>
    <div class="used-box" v-if="!isChangeMobile">
      <input type="number" v-model="mobile" placeholder="请输入手机号" />
    </div>
    <div class="used-box" v-if="isChangeMobile">
      <input type="text" v-if="!isSet1" v-model="newMobile" placeholder="请输入手机号" />
      <input type="text" v-if="isSet1" v-model="mobile" placeholder="请输入手机号" />
      <span style="color:#2F54EB" v-if="isShowCodeBtn" @click="getMobileCode"
        >获取验证码</span
      >
      <span style="color:#ccc" v-else
        >{{ total < 10 ? "0" + total : total }}秒后重新发送</span
      >
    </div>

    
    <div class="title-div">
      {{ isChangeMobile ? "请输入验证码" : "验证码" }}
    </div>
    <div v-if="isChangeMobile" class="used-box">
      <input type="number" v-model="code" placeholder="请输入验证码" />
      
    </div>
    <div v-if="!isChangeMobile" class="used-box">
      <input type="number" v-model="code" />
      <span style="color:#2F54EB" v-if="isShowCodeBtn" @click="getMobileCode"
        >获取验证码</span
      >
      <span style="color:#ccc" v-else
        >{{ total < 10 ? "0" + total : total }}秒后重新发送</span
      >
    </div>
    <div>
      <button v-if="isSet1" @click="regPasswordMobile">下一步</button>
      <button v-else @click="changePhone">完成</button>
    </div>
  </div>
</template>

<script>
import GetQueryValue from "utils/getQueryVal";
import { sendCode, regPwdAndMobile,verifyCaptcha, updateUser,updateMobile } from "api/User";
export default {
  name: "setPwdSpeed_1",
  data() {
    return {
      isChangeMobile: false,
      mobile: "",
      newMobile: "",
      code: "",
      isShowCodeBtn: true,
      total: 60,
      isSet1: true,
      timer:null
    };
  },
  methods: {
    getMobileCode() {
      let mobile  = ''
      if(this.isSet1){
        mobile = this.mobile
      }else{
        mobile = this.newMobile
      }
      if (/^1[3456789]\d{9}$/.test(mobile)) {
        sendCode({ phoneNum: mobile }).then(({ code, message }) => {
          if (!code) {
            this.timer = setInterval(() => {
              if (this.total <= 1) {
                this.isShowCodeBtn = true;
                this.total = 60;
                clearInterval(this.timer);
                return false;
              } else {
                this.total--;
                this.isShowCodeBtn = false;
              }
            }, 1000);
          } else {
            this.$toast(message);
          }
        });
      } else {
        this.$toast("手机号输入有误");
      }
    },
    regPasswordMobile() {
      console.log(11);
      if(this.mobile==''){
        this.$toast("手机号输入有误");
        return
      }
      if(this.code==''){
        this.$toast("验证码输入有误");
        return
      }
      if (this.isChangeMobile) {
        //打开状态---不跳转
        this.isSet1 = false;
        this.isShowCodeBtn = true;
        this.total = 60;
        clearInterval(this.timer);
        this.code = ''
      } else {
        this.isSet1 = true;
        verifyCaptcha({ phoneNum: this.mobile, captcha: this.code }).then(
          ({ code, message, data }) => {
            if (!code) {
              this.$router.push("/setPwdSpeed_2?reg=true&phone="+this.mobile);
            } else {
              this.$toast(message);
            }
          }
        );
      
      }
    },
    changePhone() {
      if (/^1[3456789]\d{9}$/.test(this.newMobile)) {
        updateMobile({ phoneNum: this.newMobile, captcha: this.code }).then(
          ({ code, message, data }) => {
            if (!code) {
              updateUser({ phone: this.newMobile }).then(
                ({ code: codes, message }) => {
                  if (!codes) {
                    this.$toast("修改成功！");
                    let userInfo = JSON.parse(localStorage.userInfo);
                    userInfo.phone = this.newMobile;
                    localStorage.userInfo = JSON.stringify(userInfo);

                    this.$router.push("/myinfo");
                  } else {
                    this.$toast(message);
                  }
                }
              );
            } else {
              this.$toast(message);
            }
          }
        );
      } else {
        this.$toast("新手机号码格式不正确！");
      }
    },
  },
  mounted() {
    let type = this.$route.query.msg || window.location.hash.split("msg=")[1];
    console.log(this.$route.query.msg);

    // 如果是修改手机号编辑状态
    if (type) {
      this.mobile = JSON.parse(localStorage.userInfo).phone;
      this.isChangeMobile = true;
    }

    console.log(this.isChangeMobile);
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/styl/mixin.styl'
.password-box
  padding rem(16) rem(15)
  .password-title
    font-size rem(12)
    color #999999
  .title-div
    margin-top rem(20)
    margin-bottom rem(8)
    color #666666
  div
    input
      border rem(1) solid #CCCCCC
      height rem(40)
      width 100%
      border-radius rem(5)
      color #333333
      padding 0 rem(10)
      box-sizing border-box
    button
      border-radius rem(5)
      margin-top rem(54)
      width rem(345)
      height rem(49)
      background $baseColor
      color $infoColor
  .used-box
    position relative
    input
      width 100%
      padding-right rem(75)
    span
      position absolute
      right rem(10)
      top 40%
</style>
